<template>
	<el-row class="Dashboard">
		<el-row class="information">
			<el-col :span="8"><div class="grid-content bg-purple-l" style="background:#4db6ac;">
				<span>今日接收消息数量</span>
				<span>11520</span>
			</div></el-col>
			<el-col :span="8"><div class="grid-content bg-purple-c" style="background:#4db6ac;">
				<span>今日接收消息数量</span>
				<span>11520</span>
			</div></el-col>
			<el-col :span="8"><div class="grid-content bg-purple-r" style="background:#4db6ac;">
				<span>今日接收消息数量</span>
				<span>95%</span>
			</div></el-col>
		</el-row>
		<!--<el-row class="zhe_xian">
				<div class="title">设备分布图</div>
				<el-col :span="24"><div class="grid-content bg-purple-light" id="zhe" style="width: 80%;height:400px;"></div>
			</el-col>
		</el-row>-->
		<!--<el-row>
			<el-col :span="20" class="bao_jin" >
				报警信息
			</el-col>
		</el-row>-->
		<!--<el-row class="bao_xin">
			<el-col :span="24" >
				<el-table
				:data="tableData"
				style="width:100%;"  
				border
				:header-cell-class-name="tableheaderClassName"
				:row-class-name="tableRowClassName">
					<el-table-column
						prop="desc"
						label="类型"
						width="">
					</el-table-column>
					<el-table-column
						prop="age"
						label="级别"
						>
					</el-table-column>
					<el-table-column
						prop="news"
						label="消息"
						width="">
					</el-table-column>
					<el-table-column
						prop="add_time"
						label="日期"
						width="180">
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>-->
	</el-row>
</template>
<script>
import  echarts from 'echarts';
// import $ from 'jquery';
import { getUserListPage} from '../api/fictitious.js';
export default {
	name: 'Dashboard',
	data() {
		return {
			filters: {
				name: ''
			},
			page: 1,
			total: 0,
			table:"报警信息",
			tableData: [],
		};
	},
	methods: {
		//获取用户列表
		getUsers() {	 
			let para = {
				page: this.page,
				name: this.filters.name,
				table:this.table,
			};
			this.listLoading = true;
			getUserListPage(para).then((res) => {
				console.log(res.data);
				this.total = res.data.total;
				this.tableData = res.data.dashboard;
				this.listLoading = false;
			});
		},
		// formatter(row, column) {
		// 	return row.address;
		// },
		filterTag(value, row) {
			return row.tag === value;
		},
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted:function () {
		this.getUsers();
		// var _this = this;
		
		// var val=10;
		//基于准备好的dom，初始化echarts实例
		// 设备接入
		this.zhe = echarts.init(document.getElementById('zhe'));
		this.zhe.setOption({
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', '时间']
			},
			tooltip: {  
				trigger: 'item',  
				formatter: '{b}:\n{c}%'  
			}, 
			yAxis: {
				axisLabel: {
					formatter: function (val) {
						return val * 1 + '%';
					}
				},
			},
			series: [{
				data: [30, 43, 76, 65, 34, 87,95],
				type: 'line',
				
			}]
		});
	}
};
</script>
<style scoped>
	.Dashboard .information{
		height: 80px;
		text-align: center;
		overflow: hidden;
	}
	.Dashboard .information .grid-content{
		height: 100px;
		line-height: 85px;
		width: 80%;
		margin: 0 auto;
		color:#d4e157;
	}
	.Dashboard .information .grid-content .bg-purple-c{
		background: #000;
	}
	.Dashboard #zhe{
		 border: 2px solid;
		 width:80%;
	}
	.Dashboard .zhe_xian{
		margin-top: 30px;
	}
	.Dashboard .zhe_xian .grid-content{
		margin: 0 auto;
	}
	.Dashboard .zhe_xian .title{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 30px;
	}
	.Dashboard .bao_jin{
		margin-left: 10%;
		margin-top:30px;
		 color:#f7a600;
		 margin-bottom: 30px;
		 font-size: 24px;
	}
	.Dashboard  .bao_xin .el-table thead tr{
			background: red;
	}
	.Dashboard  .bao_xin{
		width: 80%;
		margin: 0 auto;
		margin-bottom: 30px;
	}
</style>